import React, { Component } from 'react'
import { Card, Form, Input, Icon, Button } from 'antd'
import { withRouter } from 'react-router-dom'
import store from '../../store/index'
import * as fetch from '../../utils/http'
import logo from '../../assets/img/logo.png'
import '../../styles.scss'

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = store.getState();
        console.log(this.state)
    }
    state = {}

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                fetch.post('Authority/Login', values).then(res => {
                    if (res.isSuccess) {
                        const { token, user, userMenus } = res.data;
                        localStorage.setItem('token', token);
                        localStorage.setItem('menuList', JSON.stringify(userMenus))
                        localStorage.setItem('user', JSON.stringify(user))
                        localStorage.setItem('current-menu', '/main/home')
                        this.props.history.replace('/main/home')
                        // const action = {
                        //     type: 'initMenu',
                        //     value: userMenus
                        // }
                        // store.dispatch(action)
                    }
                })
            }
        })
    }

    componentDidMount() {

    }

    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <div className="default-bg login-page d-flex justify-content-center align-items-center vw-100  vh-100">
                <Card className="login-card card-box-shadow" bordered={false} hoverable={true} style={{ width: '350px', height: '300px' }}>
                    <img className="logon-logo" style={{ margin: '30px auto', display: 'block' }} src={logo} alt="" />
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <Form.Item>
                            {getFieldDecorator('account', {
                                rules: [{ required: true, message: '请输入用户名' }],
                            })(
                                <Input
                                    className="h-40"
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="text"
                                    placeholder="用户名"
                                />,
                            )}
                        </Form.Item>
                        <Form.Item>
                            {getFieldDecorator('password', {
                                rules: [{ required: true, message: '请输入密码' }]
                            })(
                                <Input
                                    className="h-40"
                                    prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    type="password"
                                    placeholder="密码"
                                />
                            )}
                        </Form.Item>
                        <Form.Item>
                            <Button block type="primary" htmlType="submit" className="login-form-button h-40 f-b">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        );
    }
}

export default withRouter(Form.create()(Login))